import React, {FC, useCallback, useEffect, useMemo, useState} from "react";
import "../../component/modal/css/PreviewModal.less";
import SyntaxHighlighter from 'react-syntax-highlighter';
import {obsidian} from 'react-syntax-highlighter/dist/esm/styles/hljs';

interface CodePreviewProps {
    file?: any,
    fileId?: string,
    suffix: string,
    fileInfo?: any
}

const CodePreview: FC<CodePreviewProps> = (props) => {

    const [originFile, setOriginFile] = useState<string>();

    const loadFile: Function = useCallback(() => {
        if (props.file) {
            setOriginFile(props.file);
        }
    }, []);

    useEffect(() => {
        loadFile()
    }, []);

    const renderCodePreview = useMemo(() => {
        let {suffix}: { suffix: string } = props;

        if (!originFile || !suffix) {
            return null;
        }

        return (
            <SyntaxHighlighter className={"sf_core_preview_code"}
                               language={suffix.toUpperCase()} obsidian={obsidian}>
                {originFile}
            </SyntaxHighlighter>
        )
    }, [originFile]);

    return (renderCodePreview);
};

export default React.memo(CodePreview);